import { defineConfig, presetIcons, presetUno } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'
import presetAnimations from 'unocss-preset-animations'

export default defineConfig({
  shortcuts: {
    'f-center-flex': 'flex items-center justify-center',
    'f-m-0-auto': 'my-0 mx-auto'
  },
  presets: [
    presetUno(),
    presetRemToPx({
      baseFontSize: 4,
    }),
    presetIcons(),
    presetAnimations(),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
  theme: {
    breakpoints: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px'
      // => @media (min-width: 1536px) { ... }
    }
  }
})
